@mixin snapcraft-p-file-input {
  .p-file-input {
    * {
      pointer-events: none;
    }

    &.is-dragging {
      border-color: transparent;
      position: static;

      &::after {
        align-items: center;
        background: $color-x-light;
        border-color: $color-mid-light;
        border-radius: $border-radius;
        border-style: dashed;
        border-width: 2px;
        bottom: 0;
        color: $color-link;
        content: "Drop to upload";
        display: flex;
        justify-content: center;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
      }
    }

    &.can-drop {
      border-color: transparent;

      &::after {
        align-items: center;
        background: $color-light;
        border-color: transparent;
        border-radius: $border-radius;
        bottom: 0;
        color: $color-link;
        content: "Aaaand... Drop";
        display: flex;
        justify-content: center;
        left: 0;
        outline-color: $color-link;
        outline-offset: -1rem;
        outline-style: dashed;
        outline-width: 2px;
        position: absolute;
        right: 0;
        top: 0;
      }
    }

    &.over-limit {
      border-color: transparent;

      &::after {
        align-items: center;
        background: $color-x-light;
        border-color: $color-caution;
        border-radius: $border-radius;
        bottom: 0;
        color: $color-x-dark;
        content: "Only one image allowed at a time";
        cursor: no-drop;
        display: flex;
        justify-content: center;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
      }
    }

    &.p-file-input--is-small {
      &::after {
        content: "";
      }

      &.is-dragging {
        &::after {
          content: "Drop";
        }
      }

      &.can-drop {
        &::after {
          content: "";
        }
      }
    }
  }
}
